import { createRouter, createWebHistory } from 'vue-router'

// 主页面路由
import MainView from '../views/MainView.vue'
import HomeView from '../views/main/HomeView.vue'
import AboutView from '../views/main/AboutView.vue'
import SupportView from '../views/main/SupportView.vue'
import LoginPage from '../views/login/LoginPage.vue'
import RegisterPage from '../views/login/RegisterPage.vue'

// 客户端路由
import ClientView from '../views/client/ClientView.vue'
import ClientHome from '../views/client/HomeView.vue'
import ClientTicketCreate from '../views/client/TicketCreate.vue'
import ClientTicketList from '../views/client/TicketList.vue'
import ClientTicketDetail from '../views/client/TicketDetail.vue'

// 员工端路由
import StaffView from '../views/staff/StaffView.vue'
import StaffHome from '../views/staff/HomeView.vue'
import StaffTicketList from '../views/staff/TicketList.vue'
import StaffTicketDetail from '../views/staff/TicketDetail.vue'

// 管理员端路由
import AdminView from '../views/admin/AdminView.vue'
import AdminHome from '../views/admin/HomeView.vue'
import AdminTicketManagement from '../views/admin/TicketManagement.vue'
import AdminUserManagement from '../views/admin/UserManagement.vue'
import AdminStatistics from '../views/admin/Statistics.vue'
import AdminSettings from '../views/admin/Settings.vue'
import AdminPermissionManagement from '../views/admin/PermissionManagement.vue'

const routes = [
  // 主页面路由
  {
    path: '/',
    name: 'main',
    component: MainView,
    children: [
      {
        path: '',
        name: 'main-home',
        component: HomeView,
        meta: { title: '主页 - YT工单派单管理系统' }
      },
      {
        path: 'about',
        name: 'main-about',
        component: AboutView,
        meta: { title: '关于我们 - YT工单派单管理系统' }
      },
      {
        path: 'support',
        name: 'main-support',
        component: SupportView,
        meta: { title: '帮助中心 - YT工单派单管理系统' }
      }
    ]
  },
  // 登录页面
  {
    path: '/login',
    name: 'login',
    component: LoginPage,
    meta: { title: '用户登录 - YT工单派单管理系统' }
  },
  // 注册页面
  {
    path: '/register',
    name: 'register',
    component: RegisterPage,
    meta: { title: '用户注册 - YT工单派单管理系统' }
  },
  // 客户端路由
  {
    path: '/client',
    name: 'client',
    component: ClientView,
    meta: { requiresAuth: true, role: 'client' },
    children: [
      {
        path: '',
        name: 'client-home',
        component: ClientHome,
        meta: { title: '客户主页 - YT工单派单管理系统', requiresAuth: true, role: 'client' }
      },
      {
        path: 'tickets/create',
        name: 'client-ticket-create',
        component: ClientTicketCreate,
        meta: { title: '创建工单 - YT工单派单管理系统', requiresAuth: true, role: 'client' }
      },
      {
        path: 'tickets',
        name: 'client-ticket-list',
        component: ClientTicketList,
        meta: { title: '我的工单 - YT工单派单管理系统', requiresAuth: true, role: 'client' }
      },
      {
        path: 'tickets/:id',
        name: 'client-ticket-detail',
        component: ClientTicketDetail,
        meta: { title: '工单详情 - YT工单派单管理系统', requiresAuth: true, role: 'client' }
      }
    ]
  },
  // 员工端路由
  {
    path: '/staff',
    name: 'staff',
    component: StaffView,
    meta: { requiresAuth: true, role: 'staff' },
    children: [
      {
        path: '',
        name: 'staff-home',
        component: StaffHome,
        meta: { title: '员工主页 - YT工单派单管理系统', requiresAuth: true, role: 'staff' }
      },
      {
        path: 'tickets',
        name: 'staff-ticket-list',
        component: StaffTicketList,
        meta: { title: '处理工单 - YT工单派单管理系统', requiresAuth: true, role: 'staff' }
      },
      {
        path: 'tickets/:id',
        name: 'staff-ticket-detail',
        component: StaffTicketDetail,
        meta: { title: '工单详情 - YT工单派单管理系统', requiresAuth: true, role: 'staff' }
      }
    ]
  },
  // 管理员端路由
  {
    path: '/admin',
    name: 'admin',
    component: AdminView,
    meta: { requiresAuth: true, role: 'admin' },
    children: [
      {
        path: '',
        name: 'admin-home',
        component: AdminHome,
        meta: { title: '管理主页 - YT工单派单管理系统', requiresAuth: true, role: 'admin' }
      },
      {
        path: 'tickets',
        name: 'admin-ticket-management',
        component: AdminTicketManagement,
        meta: { title: '工单管理 - YT工单派单管理系统', requiresAuth: true, role: 'admin' }
      },
      {
        path: 'users',
        name: 'admin-user-management',
        component: AdminUserManagement,
        meta: { title: '用户管理 - YT工单派单管理系统', requiresAuth: true, role: 'admin' }
      },
      {
        path: 'statistics',
        name: 'admin-statistics',
        component: AdminStatistics,
        meta: { title: '统计分析 - YT工单派单管理系统', requiresAuth: true, role: 'admin' }
      },
      {
        path: 'settings',
        name: 'admin-settings',
        component: AdminSettings,
        meta: { title: '系统设置 - YT工单派单管理系统', requiresAuth: true, role: 'admin' }
      },
      {
        path: 'permissions',
        name: 'admin-permission-management',
        component: AdminPermissionManagement,
        meta: { title: '权限管理 - YT工单派单管理系统', requiresAuth: true, role: 'admin' }
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 设置页面标题和登录验证
// 使用Vue Router的全局前置守卫进行路由控制
router.beforeEach((to, from, next) => {
  // 设置页面标题
  // 根据路由元信息中的title属性设置页面标题
  if (to.meta.title) {
    document.title = to.meta.title
  }
  
  // 检查路由是否需要认证
  // 遍历路由记录，检查是否存在需要认证的路由
  const requiresAuth = to.matched.some(record => record.meta.requiresAuth)
  
  // 获取登录状态
  // 通过检查localStorage中的userToken判断用户是否已登录
  const token = localStorage.getItem('userToken')
  const isLoggedIn = !!token
  
  // 路由守卫逻辑
  if (requiresAuth && !isLoggedIn) {
    // 如果路由需要认证但用户未登录，则重定向到登录页
    next('/login')
  } else if (isLoggedIn && to.path === '/login') {
    // 如果用户已登录但试图访问登录页，则重定向到对应角色的主页
    const role = localStorage.getItem('userRole')
    if (role === 'admin') {
      next('/admin')
    } else if (role === 'client') {
      next('/client')
    } else if (role === 'staff') {
      next('/staff')
    } else {
      next('/')
    }
  } else if (isLoggedIn && to.meta.role) {
    // 如果用户已登录且访问需要特定角色的页面，验证角色是否匹配
    const userRole = localStorage.getItem('userRole')
    if (to.meta.role === userRole) {
      // 角色匹配，允许访问
      next()
    } else {
      // 角色不匹配，重定向到对应角色的主页
      if (userRole === 'admin') {
        next('/admin')
      } else if (userRole === 'client') {
        next('/client')
      } else if (userRole === 'staff') {
        next('/staff')
      } else {
        next('/')
      }
    }
  } else {
    // 其他情况正常导航
    next()
  }
})

export default router